﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        :close-on-click-modal="false"
        :before-close="handleBeforeClose"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="店铺名称">{{ entityObj.storeName }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="品牌">{{ entityObj.brandName }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="类型">{{ entityObj.storeTypeDesc }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="联系人">{{ entityObj.realName }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="联系电话">{{ entityObj.mobile }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="联系地址">{{ entityObj.address }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="结款方式">{{ entityObj.paymentTypeDesc }}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="110px" label="开票类型">{{ entityObj.invoicingTypeDesc }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="110px" label="点单机构信息" prop="applyOrderItems">
                        <el-button size="small" @click="addSupplier()">新增点单机构</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="110px">
                        <el-table
                            :data="entityObj.storePosOrgConfigs"
                            border
                            style="width: 100%"
                            show-summary
                        >
                            <el-table-column label="点单机构编号" min-width="110">
                                <template #default="scope"> <el-input v-model="scope.row.posStoreCode" /></template>
                            </el-table-column>
                            <el-table-column label="点单机构名称" min-width="260">
                                <template #default="scope"><el-input v-model="scope.row.posStoreName" /></template>
                            </el-table-column>
                            <el-table-column label="操作" width="80">
                                <template #default="scope">
                                    <el-button
                                        size="small"
                                        @click="deleteRow(scope.$index, scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleBeforeClose">取 消</el-button>
            <el-button
                v-if="mode != 'show'"
                type="primary"
                :loading="isSaveing"
                @click="submit(4)"
            >保 存</el-button>
        </template>
    </full-screen-dialog>
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "设置配送供应商",
                Show: "查看",
            },
            entityObj: {
                supplierIds:[],
                suppliers: [],
            },
            supplierState: false,
            applyOrderState: false,
            storeState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {},
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            optionsPurchaseUnity: [],
            itemsData: [],
        };
    },
    computed: {
        totalAmount() {
            let materialFee = 0;
            this.entityObj.applyOrderItems.map((p) => {
                p.totalAmount =
                    (p.materialItems.find(
                        (t) => t.materialItemId == p.materialItemId
                    )?.price ?? 0) * p.qty;
                materialFee += p.totalAmount;
            });
            console.log(materialFee);

            const totalAmount = materialFee + this.entityObj.otherFee;
            return totalAmount;
        },
    },
    methods: {
        //显示=
        async open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "store/save-pos-org-cnfigs",
                                { ...this.entityObj }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = data;
            const returnValue = await this.$API.auth.PostProcessApi.post(
                `store/pos-org-cnfigs`,{storeId:data.storeId}
            );
            if (returnValue.status == 200) { 
                this.entityObj.storePosOrgConfigs = returnValue.response;
            }
        },
        addSupplier() {
            this.entityObj.storePosOrgConfigs.push({});
        },
        deleteRow(index) {
            this.entityObj.storePosOrgConfigs.splice(index, 1);
        },  
    },
    async mounted() {
    },
};
</script>

<style></style>
